<template>
  <div class="table-box">
    <div class="center">
      <el-table
        :data="detailList"
        border
        :max-height="table.props.height">
        <el-table-column
          type="index"
          width="80"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="id"
          label="任务ID">
        </el-table-column>
        <el-table-column
          prop="processDefinitionId"
          label="流程定义ID">
        </el-table-column>
        <el-table-column
          prop="processInstanceId"
          label="流程实例ID">
        </el-table-column>
        <el-table-column
          prop="name"
          label="任务名称">
        </el-table-column>
        <el-table-column
          prop="assignee"
          label="办理人">
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="开始时间"
          :formatter="formatDate">
        </el-table-column>
        <el-table-column
          prop="endTime"
          label="结束时间"
          :formatter="formatDate">
        </el-table-column>
        <el-table-column
          prop="durationInMillis"
          label="办理时长"
          :formatter="durationInMillisFormatter">
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box mt20 text-right">
      <el-pagination
        @current-change="getTaskInstances"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import Config from '../config';
  import $ from 'jquery';
  import moment from 'moment';

  const otherH = 185;
  const tableH = document.body.offsetHeight - otherH;
  export default {
    name: 'Monitor',
    data() {
      return {
        table: {
          props: {
            height: document.body.offsetHeight - otherH
          }
        },
        activeName: 'first',
        detailList: [],
        processInstanceId: "",
        processDefinitionId: "",
        diagramSrc: null,
        total: 0,
        currentPage: 1,
        size: 10
      }
    },
    created: function () {
      this.initPage();
    },
    mounted() {
      this.initPage();
    },
    methods: {
      initPage() {
        const tableH = document.body.offsetHeight - otherH;
        this.table.props.height = tableH;
        this.getTaskInstances();
        this.processInstanceId = this.$route.params.processInstanceId;
        this.processDefinitionId = this.$route.params.processDefinitionId;
      },
      //获取历史任务实例
      getTaskInstances: function (data) {
        const that = this;
        var Vstart = 0;
        if (data != undefined && !isNaN(data)) {
          Vstart = (data - 1) * 10;
        }
        this.$http.get(Config.url + "history/historic-task-instances?processInstanceId=" + that.processInstanceId + "&start=" + Vstart).then(function (data) {
          that.detailList = data.data.data;
          that.total = data.data.total;
        }, function (response) {
          console.info(response);
          if (response) {
          }
        })
      },
      formatDate(row, column, cellValue, index) {
        return cellValue ? moment(cellValue).format('YYYY-MM-DD HH:mm') : "";
      },
      //秒转化为分钟
      durationInMillisFormatter: function (data, row) {
        if (data.durationInMillis != null) {
          return (data.durationInMillis / 60000).toFixed(0) + "分钟";
        }
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
